<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Device利用率  - ECharts</title>
    <style> 
    .div-a{ float:left;width:24%;} 
    .div-b{ float:left;width:25%;} 
    .div-c{ float:left;width:25%;} 
    .div-d{ float:left;width:24%;} 
    </style> 
    <!-- 引入jquery.js -->
	<script type="text/javascript" src="static/js/jquery-1.8.3.min.js"></script>
    <!-- 引入 echarts.js -->
    <script src="static/js/echarts.min.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div class="div-a" id="one" style="height:200px;"></div> 
    <div class="div-b" id="two" style="height:200px;"></div> 
    <div class="div-c" id="three" style="height:200px;"></div> 
    <div class="div-d" id="four" style="height:200px;"></div> 
    <script type="text/javascript">
        // 
        var oneChart = document.getElementById('one');
        var twoChart = document.getElementById('two');
        var threeChart = document.getElementById('three');
        var fourChart = document.getElementById('four');
        
        var myOneChart = echarts.init(oneChart);
        var myTwoChart = echarts.init(twoChart);
        var myThreeChart = echarts.init(threeChart);
        var myFourChart = echarts.init(fourChart);    
        
        //one option
        optionOne = {
        	    title: {
        	        text: 'R1利用率',
        	        left:'center'
        	    },
        	    tooltip : {
        	        trigger: 'axis',
        	        axisPointer: {
        	            type: 'cross',
        	            label: {
        	                backgroundColor: '#6a7985'
        	            }
        	        }
        	    },
        	    color:['#5b9cd6'],
        	    grid: {
        	        left: '3%',
        	        right: '4%',
        	        bottom: '3%',
        	        containLabel: true,
        	    },
        	    xAxis : [
        	        {
        	            type : 'category',
        	            boundaryGap : false,
        	            data: (function (){
    		                var now = new Date();
    		                var hh = now.getHours();
    		                var res = [];
    		                var len = 5;
    		                while (len--) {
    		                    if(hh>=6){
    		                       res.unshift(hh+":00"); 
    		                       now = new Date(now - 3600000);
    		                       hh = now.getHours();
    		                    }
    		                }
    		                return res;
    		            })()
        	        }
        	    ],
        	    yAxis : [
        	        {
        	            type : 'value'
        	        }
        	    ],
        	    series : [
        	        {
        	            name:'R1利用率',
        	            type:'line',
        	            stack: '总量',
        	            areaStyle: {normal: {}},
        	            data:(function (){
    		                var res = [];
    		                var len = 5;
    		                while (len--) {
    		                	var now = new Date();
    			                var hh = now.getHours();
    			                if(hh>=6){
    		                    	res.push(Math.round(Math.random() * 20)+80);
    			                }
    		                }
    		                return res;
    		            })()
        	        }
        	    ]
        	};
        //two 
        optionTwo = {
        	    title: {
        	        text: 'R2利用率',
        	        left:'center'
        	    },
        	    tooltip : {
        	        trigger: 'axis',
        	        axisPointer: {
        	            type: 'cross',
        	            label: {
        	                backgroundColor: '#6a7985'
        	            }
        	        }
        	    },
        	    color:['#5b9cd6'],
        	    grid: {
        	        left: '3%',
        	        right: '4%',
        	        bottom: '3%',
        	        containLabel: true
        	    },
        	    xAxis : [
        	        {
        	            type : 'category',
        	            boundaryGap : false,
        	            data: (function (){
    		                var now = new Date();
    		                var hh = now.getHours();
    		                var res = [];
    		                var len = 5;
    		                while (len--) {
    		                    if(hh>=6){
    		                       res.unshift(hh+":00"); 
    		                       now = new Date(now - 3600000);
    		                       hh = now.getHours();
    		                    }
    		                }
    		                return res;
    		            })()
        	        }
        	    ],
        	    yAxis : [
        	        {
        	            type : 'value'
        	        }
        	    ],
        	    series : [
        	        {
        	            name:'R2利用率',
        	            type:'line',
        	            stack: '总量',
        	            areaStyle: {normal: {}},
        	            data:(function (){
    		                var res = [];
    		                var len = 5;
    		                while (len--) {
    		                	var now = new Date();
    			                var hh = now.getHours();
    			                if(hh>=6){
    		                    	res.push(Math.round(Math.random() * 20)+80);
    			                }
    		                }
    		                return res;
    		            })()
        	        }
        	    ]
        	};     
        // 指定图表的配置项和数据
        var optionThree = {
        	    title: {
        	        text: 'R3利用率',
        	        left:'center'
        	    },
        	    color:['#5b9cd6'],
        	    tooltip : {
        	        trigger: 'axis',
        	        axisPointer: {
        	            type: 'cross',
        	            label: {
        	                backgroundColor: '#6a7985'
        	            }
        	        }
        	    },
        	    grid: {
        	        left: '3%',
        	        right: '4%',
        	        bottom: '3%',
        	        containLabel: true
        	    },
        	    xAxis : [
        	        {
        	            type : 'category',
        	            boundaryGap : false,
        	            data: (function (){
    		                var now = new Date();
    		                var hh = now.getHours();
    		                var res = [];
    		                var len = 5;
    		                while (len--) {
    		                    if(hh>=6){
    		                       res.unshift(hh+":00"); 
    		                       now = new Date(now - 3600000);
    		                       hh = now.getHours();
    		                    }
    		                }
    		                return res;
    		            })()
        	        }
        	    ],
        	    yAxis : [
        	        {
        	            type : 'value'
        	        }
        	    ],
        	    series : [
        	        {
        	            name:'R3利用率',
        	            type:'line',
        	            stack: '总量',
        	            areaStyle: {normal: {}},
        	            data:(function (){
    		                var res = [];
    		                var len = 5;
    		                while (len--) {
    		                	var now = new Date();
    			                var hh = now.getHours();
    			                if(hh>=6){
    		                    	res.push(Math.round(Math.random() * 20)+80);
    			                }
    		                }
    		                return res;
    		            })()
        	        }
        	    ]
        	};  
        	
        var optionFour = {
        	    title: {
        	        text: 'R4利用率',
        	        left:'center'
        	    },
        	    color:['#5b9cd6'],
        	    tooltip : {
        	        trigger: 'axis',
        	        axisPointer: {
        	            type: 'cross',
        	            label: {
        	                backgroundColor: '#6a7985'
        	            }
        	        }
        	    },
        	    grid: {
        	        left: '3%',
        	        right: '4%',
        	        bottom: '3%',
        	        containLabel: true
        	    },
        	    xAxis : [
        	        {
        	            type : 'category',
        	            boundaryGap : false,
        	            data: (function (){
    		                var now = new Date();
    		                var hh = now.getHours();
    		                var res = [];
    		                var len = 5;
    		                while (len--) {
    		                    if(hh>=6){
    		                       res.unshift(hh+":00"); 
    		                       now = new Date(now - 3600000);
    		                       hh = now.getHours();
    		                    }
    		                }
    		                return res;
    		            })()
        	        }
        	    ],
        	    yAxis : [
        	        {
        	            type : 'value'
        	        }
        	    ],
        	    series : [
        	        {
        	            name:'R4利用率',
        	            type:'line',
        	            stack: '总量',
        	            areaStyle: {normal: {}},
        	            data:(function (){
    		                var res = [];
    		                var len = 5;
    		                while (len--) {
    		                	var now = new Date();
    			                var hh = now.getHours();
    			                if(hh>=6){
    		                    	res.push(Math.round(Math.random() * 20)+80);
    			                }
    		                }
    		                return res;
    		            })()
        	        }
        	    ]
        	};  
        
        // 使用刚指定的配置项和数据显示图表。
        myOneChart.setOption(optionOne);
        myTwoChart.setOption(optionTwo);
        myThreeChart.setOption(optionThree);
        myFourChart.setOption(optionFour);
        
        //自适应
        setTimeout(function (){
		    window.onresize = function () {
		        myOneChart.resize();
		        myTwoChart.resize();
		        myThreeChart.resize();
		        myFourChart.resize();
		    }
		},1000)
    </script>
</body>
</html>